Address page: change list views to table views on mobile#3506
Merged
Conversation
tom2drum
added
the
skip checks
Contributor
|
Important Review skippedAuto reviews are disabled on this repository. To trigger a review, include ⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
tom2drum
removed
the
skip checks
There was a problem hiding this comment.
Pull request overview
This PR updates address-related tabs and several list pages to use the table layout on mobile as well as desktop, introducing a shared horizontal scroll container for small screens and reducing/removing mobile-specific list branches.
Changes:
- Introduces
TableContainerScrollableand adjusts table styling so tables can be horizontally scrolled on mobile while disabling sticky headers belowlg. - Refactors multiple address tabs and related pages (txs, token transfers, internal txs, balances, blocks validated, user ops, epoch rewards, deposits/withdrawals, etc.) to render tables across breakpoints and remove redundant mobile list branches.
- Makes small layout/tuning adjustments (table cell padding, min table widths, ActionBar padding, routed tabs props) to better fit mobile table UX.
Reviewed changes
Copilot reviewed 31 out of 31 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| src/toolkit/theme/recipes/table.recipe.ts | Adjusts table cell vertical padding responsively for mobile vs desktop. |
| src/toolkit/chakra/table.tsx | Disables sticky headers on mobile and adds TableContainerScrollable wrapper. |
| src/slices/tx/pages/index/list/TxsWithApiSorting.tsx | Renames and forwards prop controlling mobile table rendering. |
| src/slices/tx/pages/index/list/TxsHeaderMobile.tsx | Removes table-view toggle button slot from mobile header. |
| src/slices/tx/pages/index/list/TxsContent.tsx | Refactors list/table branching and wraps tables with scroll container on mobile. |
| src/slices/token/pages/address/ERC20TokensTable.tsx | Sets a minimum table width to support horizontal scrolling. |
| src/slices/token/pages/address/ERC20Tokens.tsx | Removes mobile list rendering; always uses table with scroll container. |
| src/slices/token/pages/address/AddressNFTs.tsx | Tweaks ActionBar spacing for mobile. |
| src/slices/token/pages/address/AddressCollections.tsx | Tweaks ActionBar spacing for mobile. |
| src/slices/token-transfer/components/list/TokenTransferTableItem.tsx | Forces compact address display mode on small screens. |
| src/slices/token-transfer/components/list/TokenTransferList.tsx | Adds TODO for eventual removal once mobile tables are finalized. |
| src/slices/address/pages/details/txs/AddressTxs.tsx | Enables table view on mobile for address txs tab. |
| src/slices/address/pages/details/tokens/AddressTokens.tsx | Simplifies tab list props and enables sticky tabs on mobile. |
| src/slices/address/pages/details/token-transfers/AddressTokenTransfersLocal.tsx | Removes mobile list; wraps token transfer table with scroll container. |
| src/slices/address/pages/details/internal-txs/AddressInternalTxs.tsx | Removes mobile list; wraps internal txs table with scroll container. |
| src/slices/address/pages/details/coin-balance/AddressCoinBalanceHistory.tsx | Removes mobile list; uses min-width table inside scroll container. |
| src/slices/address/pages/details/blocks-validated/AddressBlocksValidated.tsx | Removes mobile list; uses min-width table inside scroll container. |
| src/slices/address/pages/details/Address.tsx | Moves beacon-chain AddressWithdrawals import to feature folder location. |
| src/shell/page/action-bar/ActionBar.tsx | Normalizes ActionBar bottom padding across breakpoints. |
| src/shared/lists/useTableViewValue.ts | Adds TODO indicating planned removal of legacy mobile view-flag hook. |
| src/shared/lists/TableViewToggleButton.tsx | Adds TODO indicating planned removal of legacy mobile view toggle UI. |
| src/features/user-ops/pages/index/UserOpsContent.tsx | Removes mobile list; wraps user ops table with scroll container. |
| src/features/tx-interpretation/noves/pages/address/AddressAccountHistory.tsx | Removes mobile list; uses min-width table inside scroll container. |
| src/features/multichain/pages/address/portfolio/MultichainAddressTokensTable.tsx | Sets a minimum table width to support horizontal scrolling. |
| src/features/multichain/pages/address/portfolio/MultichainAddressPortfolioTokens.tsx | Removes mobile list; wraps tokens table with scroll container; tweaks spacing. |
| src/features/multichain/pages/address/MultichainAddressTxs.tsx | Enables table view on mobile for multichain address txs. |
| src/features/cross-chain-txs/pages/address/AddressTxsCrossChain.tsx | Removes mobile table/list toggle; forces table view (sticky header desktop only). |
| src/features/chain-variants/celo/pages/address/AddressEpochRewards.tsx | Removes mobile list; wraps epoch rewards table with scroll container. |
| src/features/chain-variants/beacon-chain/pages/deposits/BeaconChainDepositsTable.tsx | Small width tweak for the “Transaction hash” column. |
| src/features/chain-variants/beacon-chain/pages/address/AddressWithdrawals.tsx | Removes mobile list; wraps withdrawals table with scroll container. |
| src/features/chain-variants/beacon-chain/pages/address/AddressDeposits.tsx | Removes mobile list; wraps deposits table with scroll container. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description and Related Issue(s)
Resolves #3502
On mobile, address-related tabs and several global list pages previously rendered a separate list layout while desktop used tables. This PR unifies those views to use the table layout on all breakpoints, with horizontal scrolling on small screens.
Proposed Changes
TableContainerScrollablefor mobile horizontal scroll and disable sticky table headers belowlg(tables live inside a scroll container on mobile).AddressWithdrawalsinto the beacon-chain feature folder (alongside deposits).TableViewToggleButtonanduseTableViewValuefor eventual cleanup once mobile tables are finalized.Breaking or Incompatible Changes
None.
Additional Information
N/A
Checklist for PR author